<template>
    <div>
        <h1>显示页面</h1>
        <div>
            状态: <select v-model="info.IsDeleted">
                <option value="">请选择</option>
                <option value="false">冻结</option>
                <option value="true">正常</option>
            </select>
            时间: <input type="time" v-model="info.Edate">-<input type="time" v-model="info.Sdate">
        </div>
        <table class="table">
            <tbody class="table">
                <tr>
                    <th>名称</th>
                    <th>开始时间</th>
                    <th>结束时间</th>
                    <th>图片</th>
                    <th>状态</th>
                </tr>
                <tr v-for="item in data.list" :key="item.id">
                    <td>{{item.name}}</td>
                    <td>{{item.sdate}}</td>
                    <td>{{item.edate}}</td>
                    <td><img :src="item.img" width="50" height="50" alt=""></td>
                    <td>{{item.isDeleted==false?"冻结":"正常"}}</td>
                </tr>
            </tbody>
            <div>
                当前 <span>{{ info.pageindex }}</span>页
                每页<span>{{info.pagesize}}</span>条
                当前<span>{{info.pageindex}}</span>/ <span>{{data.page}}</span>页
                <input type="button" value="首页" @click="gopage(1)">
                <input type="button" value="上一页" @click="gopage(info.pageindex-1)">
                <span v-for="im in data.page" @click="gopage(im)">{{im}}</span>
                <input type="button" value="下一页" @click="gopage(info.pageindex+1)">
                <input type="button" value="尾页" @click="gopage(data.page)">
                <input type="number" v-model="info.pageindex">
                <input type="button" value="跳转" @click="gopage(info.pageindex)">
                <select v-model="info.pagesize" @change="show" >
                    <option value="">请选择</option>
                    <option v-for="item in arr">每页{{item}}条</option>
                </select>
            </div>
        </table>
    </div>
</template>
<script setup lang="ts">
import axios from 'axios';
import { ref,reactive,onMounted } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import Show from '../Show.vue';
let arr:any=ref([2,3,4,5]);
const show=()=>{
    info.pageindex=1;
    getlist();
}
const info:any=reactive({
    IsDeleted:'',
    Edate:'',
    Sdate:'',
    pageindex:1,
    pagesize:3
})
const data:any=reactive({
     count:0,
     page:0,
     list:[]
})
const gopage=(num:any)=>{
    if(num<1)
{
    info.pageindex=1;
    return;
}
if(num>data.count)
{
    info.pageindex=data.page;
    return;
}
info.pageindex=num;
getlist();
}
onMounted(()=>{
    getlist();
})
const les:any=ref({

})
const getlist=()=>{
    axios.get('https://localhost:7145/api/House/GetHouse',{params:info}).then(res=>{
        Object.assign(data,res.data)
    })
}
</script>

<style scoped>

</style>